<template>
	<view>
		<view class="login_top">
			<view class="" :style="'height: '+statusBarHeight+'px;'"></view>
			<view class="hometext" style="display: flex;justify-content: center;align-items: center;">
				<!-- #ifdef APP-PLUS -->
				<view class="myTop flex_between">
					<view class="left flex" @click="reget">
						<image src="../../static/adress.png" mode=""></image>{{addresscity?addresscity:'北京'}}
					</view>
					<view class="">联盟商家</view>
					<view class="" style="width: 84rpx;"></view>
				</view>
				<!-- #endif -->

				<!-- #ifndef APP-PLUS -->
				<view class="myTop flex_between">
					<view class="" style="width: 44rpx;"></view>
					<view class="">联盟商家</view>
					<view class="" style="width: 44rpx;"></view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="" :style="'height: '+statusBarHeight+'px;'"></view>
		<view class="search flex" style="margin-top: -300rpx;">
			<image src="/static/search.png" mode=""></image>
			<input type="text" v-model="search" @input="$u.debounce(btnAClick, 500)"
				style="text-align: center;width: 560rpx;margin-left: 10rpx;"
				placeholder-style="font-weight: 400;font-size: 24rpx;color: #CCCCCC;" placeholder="输入内容搜索联盟商家" />
		</view>
		<scroll-view scroll-y="true">
			<view class="store" :style="`height:${scrollheight}px`">
				<view class="store_list flex" @click="$fun.jump(`./storedetail?id=${item.id}&lng=${lng}&lat=${lat}`)"
					v-for="(item,index) in businesslist" :key="index">
					<image :src="$fun.imgUrl(item.logoimage)" mode=""></image>
					<view class="itemright">
						<view class="flex">
							<view class="istag">{{item.typename}}</view>
							<view class="name">{{item.name}}</view>
						</view>
						<view class="km">距离：{{item.juli}}</view>
						<view class="isAddress">地址：{{item.address}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 44,
				businesslist: [],
				scrollheight: 0,
				addresscity: "",
				lng: '117.7535253',
				lat: '36.746374',
				search: ''
			}
		},
		onLoad() {
			const phoneInfo = uni.getSystemInfoSync();
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.scrollheight = uni.getWindowInfo().windowHeight - 100 - this.statusBarHeight
		},
		onShow() {
			// #ifdef H5
			this.getLocation()
			// #endif
			// #ifdef APP-PLUS
			let location = uni.getStorageSync('location')
			if (location) {
				this.lng = location.lng
				this.lat = location.lat
				this.addresscity = location.city
				this.nearDevice()
			} else {
				this.getLocation()
			}
			// #endif
		},
		methods: {
			reget() {
				uni.showLoading({

				})
				this.getLocation()
			},
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: (res) => {
						that.addrDel = res;
						console.log(res)
						that.lng = res.longitude
						that.lat = res.latitude
						that.nearDevice()
						// #ifdef APP-PLUS
						uni.setStorageSync('location', {
							lng: res.longitude,
							lat: res.latitude,
							city: res.address.city
						})
						that.addresscity = res.address.city
						// #endif

					},
					fail: function() {
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
						that.nearDevice()
					},
				});
				that.nearDevice()
			},
			nearDevice() {
				let {
					search,
					lng,
					lat
				} = this
				this.$fun.ajax.post('user/businesslist', {
					lng,
					lat,
					search
				}).then(res => {
					setTimeout(() => {
						uni.hideLoading()
					}, 1200)
					if (res.code == 1) {
						this.businesslist = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color;
	}

	.login_top {
		width: 750rpx;
		height: 400rpx;
		background: linear-gradient(180deg, rgba(255, 153, 153, 0.5) 0%, rgba(255, 153, 153, 0) 100%);

		.hometext {
			width: 750rpx;
			height: 88rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #19181A;
			padding: 15rpx 30rpx 16rpx;
		}
	}

	.myTop {
		width: 100%;
		height: 88rpx;
		border-radius: 1rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #19181A;
		line-height: 88rpx;
		// padding: 0 30rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}

		.left {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
	}

	.search {
		width: 690rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin: 20rpx auto;
		padding: 20rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.store {
		margin-top: 10rpx;

		&_list {
			padding: 20rpx;
			width: 690rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 0 auto 20rpx;

			.itemright {
				margin-left: 16rpx;

				.istag {
					// width: 60rpx;
					padding: 0 10rpx;
					height: 32rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #FF6B4D;
					font-weight: 400;
					font-size: 20rpx;
					color: #FF6B4D;
					text-align: center;
				}

				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-left: 4rpx;
				}

				.km,
				.isAddress {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					width: 456rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 16rpx;
				}
			}

			image {
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
</style>